<template>
	<view class="card">
		<view class="ul">
			<view class="li" v-for="(item,index) in treeData" :key="index" @click.stop="clickItem(item)">
				<view class="item" :class="{'line-left': index !== 0, 'line-right': index != treeData.length - 1}">
					<view class="item-name"
						:class="{'line-bottom':item.child && item.child.length > 0,'line-top':!treeFirst}">
						<view class="content">
							<text class="name">{{item.name}}</text>
						</view>
					</view>
				</view>
				<tree-list v-if="item.child && item.child.length > 0" :tree-data="item.child"
					@selItem="clickItem"></tree-list>
			</view>
		</view>
	</view>
</template>

<script setup name="tree-list">
	import {
		inject
	} from 'vue'
	const delItem = inject('delItem')
	const addItem = inject('addItem')
	defineProps(['treeData', 'treeFirst'])
	const emit = defineEmits(['selItem'])
	const clickItem = (item) => {
		emit('selItem', item)
	}
</script>

<style lang="scss" scoped>
	$line-length: 20px; //线长
	$spacing: 20px; //间距
	$extend: calc(#{$spacing}); //延长线

	// 线样式
	@mixin line {
		content: "";
		display: block;
		width: 1px;
		height: $line-length;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		background: #e43934;
	}

	.card {
		transition: all .3s;

		.ul {
			display: flex;
			justify-content: center;
			transition: all .3s;

			.li {
				transition: all .3s;

				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					transition: all .3s;

					&-name {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: $spacing;
						padding: 20rpx;
						background: #fff;
						border-radius: 16rpx;
						box-shadow: 0px 5rpx 30rpx 5rpx rgba(0, 0, 0, 0.04);
						;

						.content {
							display: flex;
							flex-direction: column;
							align-items: center;

							.name {
								margin: 10rpx 0 18rpx;
								color: #222;
								font-size: 30rpx;
							}
						}
					}
				}
			}

		}

		// 向下的线
		.line-bottom {
			&::after {
				@include line();
				bottom: -$line-length;
			}
		}

		// 向上的线
		.line-top {
			&::before {
				@include line();
				top: -$line-length;
			}
		}

		// 向左的线
		.line-left {
			&::after {
				@include line();
				width: calc(50% + #{$spacing});
				height: 1px;
				left: calc(-50% - #{$extend});
				top: 0;
			}
		}

		// 向右的线
		.line-right {
			&::before {
				@include line();
				width: calc(50% + #{$spacing});
				height: 1px;
				right: calc(-50% - #{$extend});
				top: 0;
			}
		}
	}
</style>